<template>
  <div class="carousel-box">
    <!-- <div @click="move(-1)" class="btn btn-left" @mouseenter="carouselPause" @mouseleave="carouselPlay"></div> -->
    <ul
      @mouseenter="carouselPause"
      @mouseleave="carouselPlay"
      class="carousel"
      :class="{transition:animate}"
      :style="moveStyle"
    >
      <!-- <li class="carousel-item">
      <div class="img_father">-->
      <!-- <div class="bg_img_1" v-for='(item,index)' of base_img  :style="{backgroundImage:`url(${IP+base_img})`}"></div> -->
      <!-- <div class="bg_img_2" :style="{backgroundImage:'url('+item.img2+')'}"></div>
          <div class="bg_img_3" :style="{backgroundImage:'url('+item.img3+')'}"></div>
          <div class="bg_img_3" :style="{backgroundImage:'url('+item.img3+')'}"></div>
        </div>
      </li>-->
      <li class="carousel-item">
        <div class="img_father">
          <div
            class="bg_img_1"
            v-for="(item,index) of base_img1"
            @click="tolianzhan(item.id)"
            :key="index"
            :style="{backgroundImage:`url(${IP+item.vthumb})`}"
          ></div>
          <!-- <div class="bg_img_2" :style="{backgroundImage:`url(${IP+base_img2})`}"></div>
          <div class="bg_img_3" :style="{backgroundImage:`url(${IP+base_img3})`}"></div>-->
        </div>
      </li>
      <li class="carousel-item">
        <div class="img_father">
          <div
            @click="tolianzhan2(item.id)"
            class="bg_img_1"
            v-for="(item,index) of base_img2"
            :key="index"
            :style="{backgroundImage:`url(${IP+item.vthumb})`}"
          ></div>
          <!-- <div class="bg_img_2" :style="{backgroundImage:`url(${IP+base_img2})`}"></div>
          <div class="bg_img_3" :style="{backgroundImage:`url(${IP+base_img3})`}"></div>-->
        </div>
      </li>
      <li class="carousel-item">
        <div class="img_father">
          <div
            @click="tolianzhan3(item.id)"
            class="bg_img_1"
            v-for="(item,index) of base_img3"
            :key="index"
            :style="{backgroundImage:`url(${IP+item.vthumb})`}"
          ></div>
        </div>
      </li>
      <li class="carousel-item">
        <div class="img_father">
          <div
            @click="tolianzhan4(item.id)"
            class="bg_img_1"
            v-for="(item,index) of base_img4"
            :key="index"
            :style="{backgroundImage:`url(${IP+item.vthumb})`}"
          ></div>
        </div>
      </li>
      <li class="carousel-item">
        <div class="img_father">
          <div
            class="bg_img_1"
            v-for="(item,index) of base_img1"
            :key="index"
            :style="{backgroundImage:`url(${IP+item.vthumb})`}"
          ></div>
        </div>
      </li>
    </ul>
    <ul class="dots">
      <li @click="chosen(index)" v-for="(item,index) of li" :key="index">
        <img v-if="i==index" :src="item.img" alt />
        <img v-else :src="item.img2" alt />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "sj",
  data() {
    return {
      i: 0,
      moveStyle: {
        transform: "",
      },
      base_img1: "",
      base_img2: "",
      base_img3: "",
      base_img4: "",
      img: [
        {
          img: require("../../assets/image/right1.png"),
          img2: require("../../assets/image/right2.png"),
          img3: require("../../assets/image/right3.png"),
        },
        {
          img: require("../../assets/image/right1.png"),
          img2: require("../../assets/image/right2.png"),
          img3: require("../../assets/image/right3.png"),
        },
        {
          img: require("../../assets/image/right1.png"),
          img2: require("../../assets/image/right2.png"),
          img3: require("../../assets/image/right3.png"),
        },
        {
          img: require("../../assets/image/right1.png"),
          img2: require("../../assets/image/right2.png"),
          img3: require("../../assets/image/right3.png"),
        },
      ],
      li: [
        {
          img: require("../../assets/image/patten_hui.png"),
          img2: require("../../assets/image/patten_tou.png"),
        },
        {
          img: require("../../assets/image/patten_hui.png"),
          img2: require("../../assets/image/patten_tou.png"),
        },
        {
          img: require("../../assets/image/patten_hui.png"),
          img2: require("../../assets/image/patten_tou.png"),
        },
        {
          img: require("../../assets/image/patten_hui.png"),
          img2: require("../../assets/image/patten_tou.png"),
        },
      ],
      animate: false,
      // duration: 1500,
      imgCount: 4,
      canClick: true,
      timer: "",
      // autoPlayTime: 9000
    };
  },
  mounted() {
    this.carouselPlay();
    this.base();
  },
  destroyed() {
    this.carouselPause();
  },
  methods: {
    base() {
      this.$api.get(`${this.tableList}linshizhanlan-1-1000000`).then((res) => {
        // console.log(res, "base");
        // this.base_img1 = res.data.page.list[0].vthumb;
        // this.base_img2 = res.data.page.list[1].vthumb;
        // this.base_img3 = res.data.page.list[2].vthumb;

        this.base_img1 = res.data.page.list.slice(0, 3);

        this.base_img2 = res.data.page.list.slice(3, 6);

        this.base_img3 = res.data.page.list.slice(6, 9);
        this.base_img4 = res.data.page.list.slice(9, 12);
      });
    },
    tolianzhan(id) {
      this.$router
        .push({
          path: `/linzhan/line/year1detail?id=${id}`,
          query: { orderId: 2, bool: true },
        })
        .catch((err) => {
          err;
        });
    },
    tolianzhan2(id) {
      this.$router
        .push({
          path: `/linzhan/line/year1detail?id=${id}`,
          query: { orderId: 2, bool: true },
        })
        .catch((err) => {
          err;
        });
    },
    tolianzhan3(id) {
      this.$router
        .push({
          path: `/linzhan/line/year1detail?id=${id}`,
          query: { orderId: 2, bool: true },
        })
        .catch((err) => {
          err;
        });
    },
    tolianzhan4(id) {
      this.$router
        .push({
          path: `/linzhan/line/year1detail?id=${id}`,
          query: { orderId: 2, bool: true },
        })
        .catch((err) => {
          err;
        });
    },

    moveTo(to) {
      if (to == undefined) {
        to = this.i + 1;
      }
      if (this.i == 0) {
        if (to > this.i) {
          this.animate = true;
        } else {
          this.animate = false;
          this.moveStyle.transform = `translateX(-${this.imgCount * 100}%)`;
          // let timer1 = setTimeout(() => {
          this.moveTo(this.imgCount - 1);
          // clearTimeout(timer1);
          // }, 100);
          return;
        }
      }
      this.i = to;
      this.moveStyle.transform = `translateX(-${this.i * 100}%)`;
      if (this.i == this.imgCount) {
        this.i = 0;
        // let timer2 = setTimeout(() => {
        // this.animate = false;
        this.moveStyle.transform = "translateX(0%)";
        // clearTimeout(timer2);
        // }, this.duration);
      }
    },
    move(n) {
      if (this.canClick) {
        this.moveTo(this.i + n);
        // this.canClick = false;
        // let timer3 = setTimeout(() => {
        this.canClick = true;
        // clearTimeout(timer3);
        // }, this.duration + 100);
      }
    },
    carouselPlay() {
      // this.timer = setInterval(() => {
      // this.moveTo();
      // }, this.autoPlayTime);
    },
    carouselPause() {
      // clearInterval(this.timer);
    },
    chosen(index) {
      this.moveTo(index);
      // let timer = setTimeout(function() {
      this.canClick = true;
      // clearTimeout(timer);
      // }, this.duration);
    },
  },
};
</script>
<style scoped>
.carousel-box {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.carousel {
  height: 100%;
}
.carousel,
.dots {
  display: flex;
  padding: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel-item .img_father {
  width: 100vw;
  height: 100%;

  display: flex;
}
.transition {
  transition: all 0.5s linear;
}

.dots > li {
  width: 60px;
  height: 40px;
  box-sizing: border-box;
  cursor: pointer;
}
.carousel-box .dots {
  position: absolute;
  width: 200px;
  bottom: 40px;
  left: 50%;

  margin-left: -100px;
}
.carousel-box .active {
  background: #b7b7b7;
}
.carousel-box .btn {
  position: absolute;
  top: 50%;
  background-repeat: no-repeat;
  background-position: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-top: -20px;
  z-index: 80;
  transform-origin: center center;
}
.carousel-box .btn:hover {
  transform: scale(1.2);
}
.carousel-box .btn-left {
  left: 10px;
  /* background-image: url(../assets/images/left.png); */
}
.carousel-box .btn-right {
  right: 10px;
  /* background-image: url(../assets/images/right.png); */
}
.bg_img_1 {
  /* background-position: center; */

  width: 33vw;
  /* height: 100%; */
  background-repeat: no-repeat;
  background-size: cover;
}
.img_father > :first-child {
  /* background-image: url("../../assets/image/right1.png"); */
  margin-left: 2vw;
}
.img_father > :last-child {
  margin-right: 2vw;
}

.bg_img_4,
.bg_img_5 {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg_img_4 {
  background-image: url("../../assets/image/bj2.png");
}
.bg_img_5 {
  background-image: url("../../assets/image/bj1.png");
}
</style>